<template>
  <div class="tree-select" :class="{ 'tree-line': isLine }">
    <treeselect
      v-if="normalizerFlag"
      :options="computedOptions"
      v-model="defaultValue"
      :defaultExpandLevel="defaultExpandLevel"
      :alwaysOpen="alwaysOpen"
      :openDirection="openDirection"
      :clearable="clearable || true"
      :multiple="multiple"
      :disabled="disabled"
      :flat="flat"
      :append-to-body="true"
      :maxHeight="200"
      @select="selectNode"
      @input="inputNode"
      placeholder="请选择"
      noResultsText="没有数据"
      searchPromptText="请选择"
      :normalizer="normalizer"
      :disable-branch-nodes="disableBranchNodes"
    />
    <treeselect
      v-else
      :options="computedOptions"
      v-model="defaultValue"
      :alwaysOpen="alwaysOpen"
      :defaultExpandLevel="defaultExpandLevel"
      :openDirection="openDirection"
      :clearable="clearable || true"
      :append-to-body="true"
      :multiple="multiple"
      :disabled="disabled"
      :flat="flat"
      :maxHeight="200"
      :disable-branch-nodes="disableBranchNodes"
      @select="selectNode"
      @input="inputNode"
      placeholder="请选择"
      noResultsText="没有数据"
      searchPromptText="请选择"
    />
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
  props: {
    // 默认选中的
    currentValue: {
      type: String,
      default: () => '',
    },
    // 树结构数据
    /**
     * {
          id: '1',
          label: 'XX集团1',
          children: []
        }  
     */
    options: {
      type: Array,
      default: () => [],
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    flat: {
      type: Boolean,
      default: false,
    },
    //分支节点扩展
    defaultExpandLevel: {
      type: Number,
      default: () => Infinity,
    },
    // 是否有清除能力
    clearable: {
      type: Boolean,
      default: () => false,
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 打开的目录
    openDirection: {
      type: String,
      default: 'auto',
    },
    // 子能选择根节点(不建议使用)
    normalizerFlag: {
      type: Boolean,
      default: () => false,
    },
    alwaysOpen: {
      type: Boolean,
      default: () => false,
    },
    trigger: {
      type: String,
      default: '',
    },
    // 是否为一行显示
    isLine: {
      type: Boolean,
      default: false,
    },
    // 是否禁止选择父节点，true禁止
    disableBranchNodes: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      departMentTree: [],
      defaultValue: !this.currentValue || this.currentValue == 'null' ? null : this.currentValue,
      normalizer(node) {
        //只能选择根节点
        if (node.children) {
          node.children.map((item) => {
            item['isDisabled'] = true;
          });
        }
        return node;
      },
    };
  },
  computed: {
    computedOptions() {
      return this.getSelectedNode(this.options);
    },
  },
  methods: {
    //删掉没有子节点的children
    getSelectedNode(nodeData) {
      nodeData.forEach((item) => {
        if ('children' in item && item.children.length === 0) {
          delete item.children;
        } else if ('children' in item && item.children.length) {
          this.getSelectedNode(item.children, item);
        }
      });
      return nodeData;
    },
    inputNode(value) {
      this.$emit('input', value);
    },
    //清空
    clearableValue() {
      this.$emit('clearableValue', null);
    },
    selectNode(node) {
      this.$emit('select', node);
    },
  },
  watch: {
    defaultValue(value) {
      if (value == undefined) {
        this.clearableValue();
      }
    },
    currentValue(newValue) {
      this.defaultValue = newValue || null;
    },
  },
  components: {
    Treeselect,
  },
};
</script>
<style lang="scss" scoped>
.tree-line {
  ::v-deep .vue-treeselect__multi-value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
  }
  ::v-deep .vue-treeselect__value-remove {
    display: none !important;
  }
}
.tree-select {
  ::v-deep .vue-treeselect__multi-value-item {
    background: #f4f4f5;
    color: #909399;
  }
  ::v-deep .vue-treeselect__value-remove {
    border-left: none;
    height: 14px;
    width: 15px;
    line-height: 13px;
    vertical-align: middle;
    border-radius: 50%;
    display: inline-block;
    background-color: #c0c4cc;
    color: #909399;
    margin-right: 5px;
  }
  ::v-deep .vue-treeselect__multi-value-item-container:hover .vue-treeselect__value-remove {
    color: #fff !important;
    background-color: #999;
  }
}
</style>
